<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>简洁Tab</title>

<style type="text/css">


body,div,ul,li{

 margin:0 auto;

 padding:0;

}

body{

 font:12px "宋体";

 text-align:center;

}

a:link{

 color:#00F;

 text-decoration:none;

}

a:visited {

 color: #00F;

 text-decoration:none;

}

a:hover {

 color: #c00;

 text-decoration:underline;

}

ul{

 list-style:none;

}

.main{

 clear:both;

 padding:8px;

 text-align:center;

}


#tabs0 {

 height: 200px;

 width: 400px;

 border: 1px solid #cbcbcb;

 background-color: #f2f6fb;

}

.menu0{

 width: 400px;

}

.menu0 li{

 display:block;

 float: left;

 padding: 4px 0;

 width:100px;

 text-align: center;

 cursor:pointer;

 background: #FFFFff;

}

.menu0 li.hover{

 background: #f2f6fb;

}

#main0 ul{

 display: none;

}

#main0 ul.block{

 display: block;

}

</style>

<script>

function setTab(m,n){

 var tli=document.getElementById("menu"+m).getElementsByTagName("li");

 var mli=document.getElementById("main"+m).getElementsByTagName("ul");

 for(i=0;i<tli.length;i++){

  tli[i].className=i==n?"hover":"";

  mli[i].style.display=i==n?"block":"none";

 }

}

</script>

</head>

<body>

<br />

<br />

<div id="tabs0">

 <ul class="menu0" id="menu0">

  <li onclick="setTab(0,0)" class="hover">vfvbfvbf</li>

  <li onclick="setTab(0,1)">gwewergwgw</li>

  <li onclick="setTab(0,2)">gerhgerghegtwe</li>

  <li onclick="setTab(0,3)">424242452</li>

 </ul>

 <div class="main" id="main0">

  <ul class="block"><li>123</li></ul>

  <ul><li>45</li></ul>

  <ul><li>09876</li></ul>

  <ul><li>54254</li></ul>

 </div>

</div>

</body>

</html>

